<!-- 示例核心代码(3/3) -->
<template>
    <el-dialog class="ba-operate-dialog" v-model="baTable.table.extend!.showAfter" width="50%" >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">售后</div>
        </template>



        <el-scrollbar  class="ba-table-form-scrollbar">

            <div  class="info-box ba-markdown">
                <div v-if="baTable.table.extend!.infoDataAfter">


                    <!--                <el-steps style="max-width: 100%;margin-bottom: 15px;margin-top: -25px;" :active="baTable.table.extend!.infoDataAfter.step_num" align-center>-->
                    <!--                    <el-step v-for="(item, index) in baTable.table.extend!.infoDataAfter.step_array"  :title="item.title"  />-->
                    <!--                </el-steps>-->

                    <el-descriptions style="margin-top: -40px;"
                        class="margin-top"
                        :column="2"
                        size="default"
                        border
                    >

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    用户
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter?.user?.nickname}} ( ID:{{baTable.table.extend!.infoDataAfter?.user?.id}} )
                        </el-descriptions-item>


                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    售后单号
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter.refund_no}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    原订单号
                                </div>
                            </template>
                            <el-link type="success" @click="orderInfo(baTable.table.extend!.infoDataAfter?.order_id)"> {{baTable.table.extend!.infoDataAfter?.order?.order_no}}</el-link>

                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    类型
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter?.return_type_text}}
                        </el-descriptions-item>



                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    申请时间
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter.create_time}}
                        </el-descriptions-item>


                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    实付金额
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter.money}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    退款金额
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter.actual_money}}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    售后理由
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter.reason}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    售后凭证
                                </div>
                            </template>

                            <el-image v-for="(v,i) in  baTable.table.extend!.infoDataAfter.images"
                                      style="width: 50px; height: 50px"
                                      :src="baTable.table.extend!.infoDataAfter.images[i]"
                                      :zoom-rate="1.2"
                                      :max-scale="7"
                                      :min-scale="0.2"
                                      :preview-src-list="baTable.table.extend!.infoDataAfter.images"
                                      :initial-index="i"
                                      fit="cover"
                            />

                        </el-descriptions-item>
                        <el-descriptions-item v-if="baTable.table.extend!.infoDataAfter.status > 1">
                            <template #label>
                                <div class="cell-item">
                                    处理状态
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter.status_text}}
                        </el-descriptions-item>
                        <el-descriptions-item v-if="baTable.table.extend!.infoDataAfter.handle_time">
                            <template #label>
                                <div class="cell-item">
                                    处理时间
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter.after_chhandle_timeeck_time}}
                        </el-descriptions-item>

                        <el-descriptions-item v-if="baTable.table.extend!.infoDataAfter.reject_reason">
                            <template #label>
                                <div class="cell-item">
                                    驳回理由
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter.reject_reason}}
                        </el-descriptions-item>
                        <el-descriptions-item v-if="baTable.table.extend!.infoDataAfter.logistics_flow > 0">
                            <template #label>
                                <div class="cell-item">
                                    物流流程
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter.logistics_flow_text}}
                        </el-descriptions-item>
                        <el-descriptions-item v-if="baTable.table.extend!.infoDataAfter.return_logistics_no">
                            <template #label>
                                <div class="cell-item">
                                    用户寄出单号
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter.return_logistics_no}}
                        </el-descriptions-item>
                        <el-descriptions-item v-if="baTable.table.extend!.infoDataAfter.return_logistics_name">
                            <template #label>
                                <div class="cell-item">
                                    用户寄出快递公司
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter.return_logistics_name}}
                        </el-descriptions-item>
                        <el-descriptions-item v-if="baTable.table.extend!.infoDataAfter.user_return_time">
                            <template #label>
                                <div class="cell-item">
                                    用户寄出时间
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter.user_return_time}}
                        </el-descriptions-item>
                        <el-descriptions-item v-if="baTable.table.extend!.infoDataAfter.logistics_no">
                            <template #label>
                                <div class="cell-item">
                                    寄出单号
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter.logistics_no}}
                        </el-descriptions-item>
                        <el-descriptions-item v-if="baTable.table.extend!.infoDataAfter.logistics_name">
                            <template #label>
                                <div class="cell-item">
                                    寄出快递公司
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter.logistics_name}}
                        </el-descriptions-item>
                        <el-descriptions-item v-if="baTable.table.extend!.infoDataAfter.shop_return_time">
                            <template #label>
                                <div class="cell-item">
                                    寄出时间
                                </div>
                            </template>
                            {{baTable.table.extend!.infoDataAfter.shop_return_time}}
                        </el-descriptions-item>





                    </el-descriptions>

                </div>
            </div>

            <div style="margin-bottom: 5px">
                售后商品
            </div>
            <el-table :data="baTable.table.extend!.infoDataAfter?.goods" border style="width: 100%">
                <el-table-column prop="name" label="商品"  />
                <el-table-column prop="sku_name" label="规格" width="100" />
                <el-table-column prop="price" label="实付价" width="100" />
                <el-table-column prop="num" label="申请数量" width="100" />
                <el-table-column prop="total_price" label="小计" width="100" />
            </el-table>

        <div
            class="ba-operate-form ba-Add-form"
        >
            <el-form
                :model="baTable.form.items"
                :label-width="baTable.form.labelWidth + 'px'"
            >


                <!--  退款/仅退款 -->
                <span  v-if="baTable.table.extend!.infoDataAfter.status == 1 && (baTable.table.extend!.infoDataAfter.return_type == 1 || baTable.table.extend!.infoDataAfter.return_type == 4)">

                    <FormItem label="审核状态" v-if="baTable.table.extend!.infoDataAfter.status == 1" type="radio"  v-model="after_status_" prop="after_status" :data="{ content: {  '30': '通过', '50': '驳回' }}"  />
                        <span v-if="baTable.table.extend!.infoDataAfter.status == 1 && after_status_ == 30">
                             <el-row>
                                <el-col :span="12">
                                    <FormItem label="是否退运费"  type="radio" prop="is_refund_freight" :data="{ content: {  '1': '是', '2': '否' }}"  v-model="is_refund_freight"  />
                                </el-col>
                                <el-col :span="12">
                                     <p style="margin-top: 7px">实付运费：{{baTable.table.extend!.infoDataAfter.order.pay_freight_money}}</p>
                                </el-col>
                            </el-row>
                            <FormItem label="驳回理由" v-if="baTable.table.extend!.infoDataAfter.status == 1 && after_status_ == 50" style="width: 80%"  type="textarea" v-model="reject_reason_" prop="reject_reason" :input-attr="{ rows: 3 }"  />
                        </span>
                </span>

                <!--  换货流程 -->
                <span  v-if="baTable.table.extend!.infoDataAfter.status == 1 && baTable.table.extend!.infoDataAfter.return_type == 2 ">
                    <FormItem label="审核状态" v-if="baTable.table.extend!.infoDataAfter.status == 1" type="radio"  v-model="after_status_" prop="after_status" :data="{ content: {  '20': '通过', '50': '驳回' }}"  />



                    <FormItem label="驳回理由" v-if="baTable.table.extend!.infoDataAfter.status == 1 && after_status_ == 50" style="width: 80%"  type="textarea" v-model="reject_reason_" prop="reject_reason" :input-attr="{ rows: 3 }"  />

                </span>

                <span  v-if="baTable.table.extend!.infoDataAfter.status == 20 && baTable.table.extend!.infoDataAfter.return_type == 2 ">
                    <label id="el-id-6970-63" for="el-id-6970-77" class="el-form-item__label" style="width: 160px;margin-bottom: 15px"><h4>请填写寄出信息</h4></label>
                    <FormItem label="公司名称" v-if="baTable.table.extend!.infoDataAfter.status == 20 && baTable.table.extend!.infoDataAfter.logistics_flow == 3" style="width: 80%"  type="string" v-model="logistics_name" prop="reject_reason"  />
                    <FormItem label="寄出单号" v-if="baTable.table.extend!.infoDataAfter.status == 20 && baTable.table.extend!.infoDataAfter.logistics_flow == 3" style="width: 80%"  type="string" v-model="logistics_no" prop="reject_reason"  />
                </span>


                <!--  退货退款流程 -->
                <span  v-if="baTable.table.extend!.infoDataAfter.status == 1 && baTable.table.extend!.infoDataAfter.return_type == 3 ">
                    <FormItem label="审核状态" v-if="baTable.table.extend!.infoDataAfter.status == 1" type="radio"  v-model="after_status_" prop="after_status" :data="{ content: {  '20': '通过', '50': '驳回' }}"  />

                    <FormItem label="驳回理由" v-if="baTable.table.extend!.infoDataAfter.status == 1 && after_status_ == 50" style="width: 80%"  type="textarea" v-model="reject_reason_" prop="reject_reason" :input-attr="{ rows: 3 }"  />
                </span>
                <span  v-if="baTable.table.extend!.infoDataAfter.status == 20 && baTable.table.extend!.infoDataAfter.return_type == 3 ">
                    <FormItem label="状态" v-if="baTable.table.extend!.infoDataAfter.status == 20" type="radio"  v-model="after_status_" prop="after_status" :data="{ content: {  '30': '收到货并退款', '50': '驳回' }}"  />
                     <FormItem label="驳回理由" v-if="after_status_ == 50" style="width: 80%"  type="textarea" v-model="reject_reason_" prop="reject_reason" :input-attr="{ rows: 3 }"  />
                </span>



            </el-form>
        </div>

        </el-scrollbar>

        <template #footer  v-if="baTable.table.extend!.infoDataAfter?.status == 1 || baTable.table.extend!.infoDataAfter?.status == 20" >
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.table.extend!.showAfter = false">取消</el-button>
                <el-button v-blur :loading="baTable.form.submitLoading" @click="subAfter" type="primary">
                    提交
                </el-button>
            </div>
        </template>

    </el-dialog>
</template>

<script setup lang="ts">
import {inject, ref} from 'vue'
import { timeFormat } from '/@/utils/common'
import type baTableClass from '/@/utils/baTable'
import FormItem from "/@/components/formItem/index.vue";
import {t} from "@wangeditor/editor";
import createAxios from "/@/utils/axios";
import {ElMessage} from "element-plus";

const baTable = inject('baTable') as baTableClass



const after_status_ = ref();
const refund_money_ = ref();
const is_refund_freight = ref(2);
const reject_reason_ = ref();
const logistics_no = ref();
const logistics_name = ref();
const subAfter = () => {
    createAxios({
        url: '/admin/after/after',
        method: 'post',
        data: {
            id:baTable.table.extend!.infoDataAfter.id,
            after_status:after_status_.value,
            refund_money:refund_money_.value,
            reject_reason:reject_reason_.value,
            is_refund_freight:is_refund_freight.value,
            logistics_no:logistics_no.value,
            logistics_name:logistics_name.value,
        }
    }, {
        loading: true
    }, {
        text: '提交中...'
    })
        .then((res) => {
            if (res.code == 1) {
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
                baTable.onTableHeaderAction('refresh', {})
                baTable.table.extend!.showAfter = false;

                after_status_.value = ''
                refund_money_.value = ''
                is_refund_freight.value = 2;
                reject_reason_.value = ''

            } else {
                ElMessage({
                    message: res.msg,
                    type: 'error',
                })
            }


        })
        .catch((resx) => {
        })
}



//  原订单信息
const orderInfo = (order_id: any) => {

    // 获取详情
    createAxios({
        url: '/admin/order/info?id='+order_id,
        method: 'get',
        data: {

        }
    }, {
        loading: true
    }, {
        text: '加载中...'
    })
        .then((res) => {
            if (res.code == 1) {

                // 在 extend 上自定义一个变量标记详情弹窗显示状态，详情组件内以此判断显示即可！

                baTable.table.extend!.showInfo = true
                baTable.table.extend!.infoData = res.data.row
            } else {

                ElMessage({
                    message: res.msg,
                    type: 'error',
                })
            }


        })
        .catch((resx) => {
        })
}
</script>

<style scoped lang="scss">
.info-box {
    margin-top: 60px;
    div {
        width: 100%;
        text-align: center;
    }
    .mt-40 {
        margin-top: 40px;
    }
}
:deep(.ba-markdown table tr:hover){
    background-color: inherit ;
}
</style>
